<template>
    <div class="peroson">
        <img :src="actor_avatar" alt="">
            <span>{{actor_name}}</span>
            <i class="el-icon-circle-close" @click="delActor"></i>
            
    </div>
</template>

<script>
    export default {
        props:{
            //声明属性
           actor_avatar:{
            type:String,
            default:''
           } ,
           actor_name:{
            type:String,
            default:"默认值姓名"
           },
          
        },
        methods:{
            delActor(){
                //子向父传参
                this.$emit("del")
            }
        }
    }
</script>

<style lang="scss" scoped>
.peroson {
    margin: 5px;
    display: inline-block;
    width: 143px;
    padding: 5px;
    border: 1px solid #ccc;
    text-align: center;
    position: relative;
}
.peroson:hover i{
    display: block;
}
.peroson i{
    display: none;
    position:absolute;
    top:-10px;
    right: -10px;
    background: #fff;
    font-size: 15px;
}
</style>